<template>
	<view>
		<view class="wrap">
			<!-- 账号信息 -->
			<view class="conetent">
				<view class="info">
					<text class="title">微信昵称:</text>
					<text class="value">{{vxName}}</text>
				</view>
				<view class="info">
					<text class="title">手机号:</text>
					<text class="value">{{memberPhone}}</text>
				</view>
			</view>

			<!-- 活动信息 -->
			<view class="conetent">
				<view class="activity-title">
					{{activityInfo.activityName}}
				</view>
				<view v-if="activityInfo.timeEnd">
					<text class="title2">活动时间:</text>
					<text class="value2">{{activityInfo.timeStart}}至{{activityInfo.timeEnd}}</text>
				</view>
				<view class="numberBox">
					<u-number-box v-model="count" @change="change" bgColor="#fff" :step="1"
						:max="activityInfo.countNumber"></u-number-box>
				</view>

				<text class="amount" style="margin-top: 40upx;">
					¥{{activityInfo.nowPrice}}
				</text>
			</view>

			<!-- 商品说明 -->
			<view class="goodsContent" v-if="activityInfo.goodsVoList">
				<view class="sectionTitle">商品说明</view>
				<view v-for="(item, index) in activityInfo.goodsVoList" :key="index">
					<detail-commodity :commodityTitle="item.goodsServerName" :commodityDesc="item.goodsServerDescribe"
						:count="item.goodsServerNumber" :totalAmount="item.goodsServerPrice"
						:totalPrice="'{{item.goodsServerNumber * item.goodsServerPrice}}'"></detail-commodity>
				</view>
			</view>

			<view class="bottomView">
				<view class="leftView">
					共计{{count}}件,合计: ¥
					<text class="amount">{{totalPrice}}</text>
				</view>
				<view class="rightBtn" @click.stop="confim">
					支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import homeTitle from '@/components/layout/mmv-home-title.vue'
	import detailCommodity from '@/components/activity/activity-detailCommodity.vue'
	import {
		apiActivityInfo,
		seckillOrder,
		cancelActivityOrder
	} from '@/api/marketing-api.js'
	export default {
		components: {
			detailCommodity,
			homeTitle
		},
		data() {
			return {
				activityId: '',
				activityInfo: {},
				count: 1,
				showAlert: false,
				vxName: '',
				memberPhone: '',
				orderNo: ''
			}
		},

		computed: {
			totalPrice() {
				let count = this.count;
				let price = this.activityInfo.nowPrice * count;
				let resultPrice = parseFloat(price).toFixed(2);
				return resultPrice
			}
		},

		methods: {
			//获取定位信息
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res => {
						this.lat = res.latitude;
						this.lon = res.longitude;
						this.getData();
					})
				});
			},
			//获取详情数据
			getData() {
				let that = this;
				apiActivityInfo({
					bizNo: that.activityId,
					lon: this.lon,
					lat: this.lat
				}).then(res => {
					this.activityInfo = res.data;
				})
			},
			change(e) {
				this.count = e.value;
				if (this.count > this.activityInfo.countNumber) {
					this.count = this.activityInfo.countNumber;
				}
			},
			confim() {
				var that = this;
				seckillOrder({
					bizNo: this.activityId,
					number: this.count,
					amount: this.totalPrice,
					tenantId : this.$store.state.user.tenantId
				}).then(res => {
					//唤起微信支付
					let data = JSON.parse(res.data.json)
					that.showAlert = false;
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							uni.$u.toast('支付成功')
							setTimeout(() => {
								uni.redirectTo({
									url: './activity-paySuccess?totalPrice=' + that.totalPrice
								})
							}, 1000)
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
							cancelActivityOrder({
								bizNo: res.data.orderNo,
							}).then(res => {
								uni.showToast({
									title: '取消支付,订单自动取消',
									icon: 'none'
								})
							})
						}
					});
				})

			},
			naviBack() {
				uni.navigateBack({

				})
			}
		},

		onLoad(op) {
			this.activityId = op.bizNo;
			this.vxName = this.$store.state.user.userInfo.vxName;
			this.memberPhone = this.$store.state.user.userInfo.contactPhone;
			this.getLocation();
		}
	}
</script>

<style lang="scss" scoped>
	.conetent {
		border-radius: 18upx;
		padding: 20upx;
		margin: 25upx;
		background-color: #fff;

		.info {
			margin-top: 10upx;
		}

		.activity-title {
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: bold;
			text-align: left;
			color: #333333;
			margin: 10upx 0 20upx 0;
		}
	}

	.title {
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: bold;
		color: #999;
	}

	.value {
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: bold;
		color: #333;
		margin-left: 20upx;
	}

	.title2 {
		font-size: 22upx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: bold;
		color: #999;
	}

	.value2 {
		font-size: 22upx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: bold;
		color: #333;
		margin-left: 20upx;
	}

	.amount {
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: bold;
		text-align: left;
		color: #ec4863;
	}

	.numberBox {
		display: flex;
		justify-content: flex-end;
	}

	.commodity {
		border-radius: 18upx;
		position: relative;
		width: 700upx;
		top: 40upx;
		left: -45upx;
	}


	.bottomView {
		display: flex;
		width: 100%;
		height: 96upx;
		line-height: 96upx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
	}


	.leftView {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60%;
		color: #666;
		background-color: #FFFFFF;
	}

	.rightBtn {
		width: 40%;
		color: #fff;
		background-color: $main-color;
		line-height: 100%;
		font-size: 33upx;
		display: flex;
		justify-content: center;
		align-items: center;
		letter-spacing: 10upx;
	}

	.sectionTitle {
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;
		color: #333;
		margin: 20upx 0;
	}

	.goodsContent {
		margin: 25upx;
	}
</style>
